<?php if(@$page_name=='Forum')  { ?>
<div id="changedp" class="changedp reveal-modal medium" data-reveal data-options="animation:'fade',animation_speed:250">
<div class="large-12 column" style="padding:0;">

	<div class="change-head large-12 column">
		<div class="large-12 column" style="padding:0;">
			<p><strong>Change Forum Profile Picture</strong></p>
		</div>
	</div>
	<div class="change-content large-12 column" data-equalizer>
		<div class="large-7 column" data-equalizer-watch>
			<div class="large-12 column" style="padding:0;">
				<div class="large-12 column" style="padding:0;">
				<strong>Avatars</strong>
					<ul class="avatar-li small-block-grid-2 medium-block-grid-3 large-block-grid-4">
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a1.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a5.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a3.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a4.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a6.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a7.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/a8.jpg">
							</a>
						</li>
					  	<li>
						  	 <a href="javascript:;" id="castle" class="avatarclick th radius">
							  <img class="my_image" src="<?= BASE_URI?>img/user_dp/steve.jpg">
							</a>
						</li>
					</ul>
				</div>

				<div class="large-12 column" style="padding:0;">
					<hr class="hr-forum-dp">
				</div>
				<div style="width:100%;position:absolute;bottom:0;">
					<a class="expand radius button">Use Account Picture<img style="display:none;width:5px;height:5px;" src="<?= IMAGE_URL_SMALL.$this->session->get('profile_pic') ?>"></a>
				</div>

				</div>

		</div>
		<div class="large-5 column" data-equalizer-watch>
			<div id="forum-img" class="forum-img forum-dp-c large-12 column" style="background-size:100% 100%;height:18rem;width:100%;">
			</div>
			<div class="text-center large-12 column" style="padding:0;">
				<a id="" class="expand button" style="background:#009EA1;">Browse</a>
			</div>
		</div>
	</div>
	<div class="change-footer large-12 column">
		<div class="text-right large-12 column">
			<a class="tiny radius button">Cancel</a>
			<a class="save tiny radius button">Save</a>
		</div>
	</div>

</div>

</div>

<?php } if((@$page_name=='Step_1') || (@$page_name=='Profile'))  { ?>
<div id="changeprimarydp" class="changedp reveal-modal medium" data-reveal data-options="animation:'fade',animation_speed:250">
<div class="large-12 column" style="padding:0;">

	<div class="change-head large-12 column">
		<div class="large-12 column" style="padding:0;">
			<p><strong>Change Profile Picture</strong></p>
		</div>
	</div>
	<div class="change-content large-12 column" data-equalizer>
		<div class="large-7 column" data-equalizer-watch>
			<div class="large-12 column" style="padding:0;">
				<div class="large-12 column" style="padding:0;">
				<strong>Avatars</strong>
					<ul class="avatar-li small-block-grid-2 medium-block-grid-3 large-block-grid-4">
					  	<li>
						  	 <a class="th radius">
							  <img  class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136372/a1_dk3k4k.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a8_f84rrb.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a7_krhaou.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a6_siqa8v.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136459/a5_bgqjbb.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136459/a4_iitn8a.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a3_igmha6.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136457/a2_sw13fs.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a6_siqa8v.jpg">
							</a>
						</li>
					  	<li>
						  	 <a class="th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136458/a8_f84rrb.jpg">
							</a>
						</li>
					  	<li>
						  	 <a href="javascript:;" id="castle" class="avatarclick th radius">
							  <img class="my_image" src="http://res.cloudinary.com/behomebased-ph/image/upload/v1419136640/steve_eiulhc.jpg">
							</a>
						</li>
						<li>
						  	 <a href="javascript:;" id="castle" class="avatarclick th radius">
							  <strong>more</strong>
							</a>
						</li>
					</ul>
				</div>

				</div>

		</div>
		<div class="large-5 column" data-equalizer-watch>
			<div id="forum-img" class="forum-img forum-dp-c large-12 column" style="background-size:100% 100%;height:18rem;width:100%;">
			</div>
			<input type="file" accept = "image/*" id="fileUpload" name="profile_pic" style="visibility: hidden; width: 1px; height: 1px" multiple />
			<div class="text-center large-12 column" style="padding:0;">
				<a id="btnUpload" class="expand button" style="background:#009EA1;">Browse</a>
			</div>
		</div>
	</div>
	<div class="change-footer large-12 column">
		<div class="text-right large-12 column">
			<a class="tiny radius button">Cancel</a>
			<a id="btnSaveMyImage" class="save tiny radius button">Save</a>
			<span id="uploading">Uploading <img src="<?= BASE_URI ?>img/loading.gif"/> </span>
		</div>
	</div>

</div>

</div>
<?php } if(@$page_name=='Step_1') { ?>
<script type="text/javascript">
jQuery(document).ready(    function() { 
	$('#uploading').hide();
	$('.forum-img').css('background-color','#C9C9C7');
	$('.forum-img').css('background-image', 'url(' + prof_pic + ')');	
	
});

$('.my_image').click(function() { 
	$('.forum-img').css('background-image', 'url(' + $(this).attr('src') + ')'); 
});

</script>


<script type="text/javascript">

var path = '';
var $profilePic = $('.forum-img');
var $btnSaveMyImage = $('#btnSaveMyImage');
var $file = $('#fileUpload');
var $upload = $('#btnUpload');

function readURL(input)
{
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            path = e.target.result;
            $profilePic.css('background-image', 'url(' + path + ')');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

function uploadPhoto(path,id)
{
  var dynamicData = {};
    dynamicData['path'] = path;
    dynamicData['id'] = id;
    return $.ajax({
        url: URL + 'api/upload/profile_pic',
        data: dynamicData,
        dataType: 'json',
        type: 'post'
    }); 
}

$upload.one('click',function(){
	$file.click();
});

$file.on('change',function(){
readURL(this);
});

$btnSaveMyImage.on('click',function(){
	//$profilePic.css('background-image', 'url(' + URL+'img/loading.gif' + ')');
	$('#uploading').show();
	var bg = $profilePic.css('background-image');
    bg = bg.replace('url(','').replace(')','');
		var id = "<?='profile_pic_'.$this->session->get('user_id'); ?>";
       uploadPhoto(bg,id).done(function(result){
            if(result.status == true)
            {
            	$('#uploading').hide();
            	$('#changeprimarydp').foundation('reveal', 'close');
            	$('#profilePic').attr('src',bg);
            }
            else
            {    	
            	alert('There is a problem on saving your photo pls try again later')
     		    //alert(result.messages);
            }
        });
});
</script>

<?php } ?>